<template>
	<view class="cocmSelect-wrap" v-if="inquiry">
		<view class="cocmSelect-content">
			<image class="cocmSelect-logo" src="https://cdn.quantifynet.cn/dti/cocm_logo.png"></image>

			<view class="cocmSelect-tip">选择下列一种符合你的体质开始测试</view>

			<view class="cocmSelect-tz">
				<view :class="['cocmSelect-tz-item', item.id == cocmId ? 'item-selectd' : '']" v-for="(item, index) in cocmList" :key="index" @click="selectItem(item.id)">
					<image class="cocmSelect-tz-img" :src="item.pictureUrl"></image>
					<view class="cocmSelect-tz-txt">{{ item.name }}</view>
				</view>
			</view>

			<view class="cocmSelect-btn" @click="gotoTopic">开始测试</view>
			<view class="cocmSelect-btn" @click="backHome">回到首页</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			cocmList: [], //体质列表
			cocmId: null
		};
	},
	onLoad() {
		this.queryCocmList();
	},
	onShareAppMessage() {
		return {
			title: '',
			success: res => {
				uni.showToast({
					title: '分享成功'
				});
			},
			fail: err => {
				uni.showToast({
					title: '分享失败',
					icon: 'none'
				});
			}
		};
	},
	methods: {
		//获取体质列表
		queryCocmList() {
			this.$api.queryCocmList({}).then(res => {
				if (res.code == 200 && res.result) {
					this.cocmList = res.result;
				}
			});
		},

		//选择
		selectItem(id) {
			this.cocmId = id;
		},

		gotoTopic() {
			if (!this.cocmId) {
				uni.showToast({
					title: '请先选择一项体质',
					icon: 'none'
				});
				return;
			} else {
				this.gotoRouter('/pages-client/cocm/cocmTopic?id=' + this.cocmId);
			}
		},

		backHome() {
			uni.reLaunch({
				url: '/pages/index/index'
			});
		}
	}
};
</script>
<style lang="less">
.cocmSelect-wrap {
	.cocmSelect-content {
		position: relative;
		z-index: 1;
		padding-bottom: 120rpx;

		.cocmSelect-logo {
			width: 750rpx;
			height: 420rpx;

			margin-bottom: 24rpx;
		}

		.cocmSelect-tip {
			font-size: 36rpx;
			font-weight: bold;
			margin-left: 36rpx;
			text-align: center;
			margin-bottom: 24rpx;
		}

		.cocmSelect-tz {
			display: flex;
			flex-wrap: wrap;
			width: 750rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
			justify-content: center;
			align-items: center;

			.cocmSelect-tz-item {
				width: 33%;
				box-sizing: border-box;
				border: 1rpx solid #cccccc20;
				background-color: #fff;
				.cocmSelect-tz-img {
					width: 100%;
					height: 140rpx;
				}
				.cocmSelect-tz-txt {
					padding: 12rpx;
					text-align: center;
					font-size: 28rpx;
					font-weight: bold;
				}
			}

			.item-selectd {
				border: 1rpx solid rgba(106, 148, 255, 1);
			}
		}

		.cocmSelect-btn {
			width: 520rpx;
			height: 90rpx;
			background: rgba(106, 148, 255, 1);
			border-radius: 10rpx;
			border: 1rpx solid rgba(5, 5, 5, 0.08);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 36rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			margin: 90rpx auto 0;
		}
	}
}
</style>
